<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>巡查信息可视化</title>

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">

</head>

<body>
    <div class="canvas">
        <Background style="position: absolute;" />
    </div>

    <div class="viewport">

        <div class="column">
            <div class="overview panel">
                <div class="inner">

                    <div class="item">
                        <h4 id="count-value1">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            总巡查数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="count-value2">2980</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            已完成数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="count-value3">23</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            待完成数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="count-value4">13</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            员工总数
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->



            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">近期问题报告</a>
                        <a href="javascript:;" data-index="1">最新问题报告</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">问题时间</span>
                            <span class="col">楼宇类型</span>
                            <span class="col">地点</span>
                            <span class="col">问题类型</span>
                            <span class="col">巡查师傅</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20251204</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251219</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">勤学楼293</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251115</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">D17215</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251021</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">丹桂苑3栋489</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251204</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250816</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">丹桂苑2栋598</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251012</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">图书馆397</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251025</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250805</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">修德楼141</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251128</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑1栋255</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251129</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼A栋474</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251020</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑3栋588</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251003</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼B栋270</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251113</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250829</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">敦行楼129</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250921</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250927</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑2栋112</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251231</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250711</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑1栋290</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250922</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">立德楼463</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251030</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">票据管431</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250904</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">D17160</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251231</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑2栋307</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251217</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进学楼417</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251221</span>
                                    <span class="col">公共</span>
                                    <span class="col">进德楼东侧</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250814</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">立德楼453</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251221</span>
                                    <span class="col">公共</span>
                                    <span class="col">进德楼东侧</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251130</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进学楼283</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250727</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">励学楼580</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250831</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250904</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑5栋578</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250711</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑4栋466</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251203</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑2栋395</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250707</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进学楼173</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251109</span>
                                    <span class="col">公共</span>
                                    <span class="col">进德楼东侧</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251016</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑2栋226</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251114</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑4栋518</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251019</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑2栋126</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250904</span>
                                    <span class="col">公共</span>
                                    <span class="col">乐学楼后花园</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250813</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">勤学楼236</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250829</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">勤学楼175</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251229</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑1栋425</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251022</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251208</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">志学楼546</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250725</span>
                                    <span class="col">公共</span>
                                    <span class="col">食堂前广场</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251115</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑1栋429</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251105</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼B栋176</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250902</span>
                                    <span class="col">公共</span>
                                    <span class="col">乐学楼后花园</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">赵六</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251014</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进德楼361</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250804</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="icon-dot"></span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">问题时间</span>
                            <span class="col">楼宇类型</span>
                            <span class="col">地点</span>
                            <span class="col">问题类型</span>
                            <span class="col">分配师傅</span>
                            <span class="col">状态</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20251230</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">乐学楼544</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251125</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进德楼488</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250830</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆前广场</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250724</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑4栋546</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250922</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251214</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼B栋577</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251230</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑2栋175</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251007</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">图书馆278</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251211</span>
                                    <span class="col">公共</span>
                                    <span class="col">食堂前广场</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250828</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼A栋371</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251123</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼B栋497</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250802</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251217</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">乐学楼203</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250812</span>
                                    <span class="col">公共</span>
                                    <span class="col">食堂前广场</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251208</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑2栋494</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251029</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑2栋315</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251022</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑1栋257</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250916</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250929</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进学楼255</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250707</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">票据管502</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250919</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">志学楼338</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251228</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑1栋243</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250811</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">进德楼223</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250911</span>
                                    <span class="col">公共</span>
                                    <span class="col">乐学楼后花园</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251231</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250928</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">D17361</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250714</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">立德楼308</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250917</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">笃行楼A栋179</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251213</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">图书馆596</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251121</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">图书馆154</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251025</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251223</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">正德楼242</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250711</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">丹桂苑3栋353</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251020</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">逸夫楼439</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250831</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑3栋390</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250807</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250829</span>
                                    <span class="col">公共</span>
                                    <span class="col">乐学楼后花园</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250729</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">乐学楼487</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250905</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑3栋260</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251010</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">玉兰苑3栋346</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251014</span>
                                    <span class="col">公共</span>
                                    <span class="col">乐学楼后花园</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250906</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">翠竹苑1栋191</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250803</span>
                                    <span class="col">公共</span>
                                    <span class="col">进德楼东侧</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251213</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">正德楼323</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250807</span>
                                    <span class="col">教学楼</span>
                                    <span class="col">乐学楼505</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251221</span>
                                    <span class="col">公共</span>
                                    <span class="col">正德楼A栋附近</span>
                                    <span class="col">空调问题</span>
                                    <span class="col">李四</span>
                                    <span class="col">已完成</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250725</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">图书馆509</span>
                                    <span class="col">电力问题</span>
                                    <span class="col">张三</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20251010</span>
                                    <span class="col">办公楼</span>
                                    <span class="col">乐学楼191</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250714</span>
                                    <span class="col">公共</span>
                                    <span class="col">图书馆西侧</span>
                                    <span class="col">一般问题</span>
                                    <span class="col">王五</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                                <div class="row">
                                    <span class="col">20250808</span>
                                    <span class="col">宿舍楼</span>
                                    <span class="col">樱花苑4栋330</span>
                                    <span class="col">水控问题</span>
                                    <span class="col">赵六</span>
                                    <span class="col">处理中</span>
                                    <span class="icon-dot"></span>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>问题类型统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    问题总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    巡查数据热力统计
                </h3>
                <div class="chart">
                    <!-- 添加地图主题选择器 -->
                    <div class="map-header">
                        <select id="map-theme-selector">
                            <option value="normal">经典主题</option>
                            <option value="dark">暗色主题</option>
                            <option value="darkblue">深蓝主题</option>
                            <option value="fresh">清新主题</option>
                            <option value="light">明亮主题</option>
                            <option value="blue">蓝白主题</option>
                            <option value="green">绿地主题</option>
                            <option value="pink">粉色主题</option>
                            <option value="orange">橙色主题</option>
                        </select>
                    </div>
                    <div id="gufe-campus-map" class="map-container"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>巡查师傅出勤情况</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>13</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    员工总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>3</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    请假人数
                                </span>
                            </div>
                            <div class="item">
                                <h4>2</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    待审批数
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h1 class="title">学校设施巡查系统数据总览</h1>
        <div class="weather-position">
            <img src="./images/yun.png" />
            <span class="wea">多云</span>
            <span class="tem">29°C</span>
            <span class="air">空气质量:优</span>
        </div>
        <div class="time-position">
            <span class="time">18:16:40</span>
            <span class="date">
                <span>星期六</span>
                <span>2025年7月5日</span>
            </span>
        </div>

        <div class="column">
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>30987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                巡查总量
                            </span>
                        </div>
                        <div class="item">
                            <h4>99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                耗费材料(元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 东西区巡查次数统计 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>东西区巡查数统计</h3>
                        <a href="javascript:;" class="active" data-type="yearly">近年</a>
                        <a href="javascript:;" data-type="year">年</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:次</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>巡查楼宇分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>12 <small>%</small></h4>
                                <span>
                                    <img class="icon-svg" src="./images/bangonglou.svg">
                                    办公楼
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <img class="icon-svg" src="./images/jioaxuelou.svg">
                                    教学楼
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>47 <small>%</small></h4>
                                <span>
                                    <img class="icon-svg" src="./images/sushelou.svg">
                                    宿舍楼
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <img class="icon-svg" style="margin-left: -0.7rem;" src="./images/shiwai.svg">
                                    室外
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>材料库存预警</h3>
                        <div class="chart">
                            <!-- 改为滚动列表形式 -->
                            <div class="scroll-box">
                                <ul class="scroll-list">
                                    <li>网线：30米 （库存正常）</li>
                                    <li>插座：库存紧张</li> <!-- 第2项红色警示 -->
                                    <li>绝缘胶布：8卷 （库存充足）</li>
                                    <li>配电箱：库存正常</li>
                                    <li>膨胀螺丝：库存紧张</li> <!-- 第5项红色警示 -->
                                    <li>防水胶带：库存充足</li>
                                    <li>LED灯管：25个 （库存正常）</li>
                                    <li>断路器：库存充足</li>
                                    <li>PVC管：45米 （库存紧张）</li>
                                    <li>电工工具包：库存正常</li>
                                    <li>防潮箱：库存充足</li>
                                    <li>绝缘手套：库存紧张</li> <!-- 第12项普通库存紧张 -->
                                    <li>应急灯：库存正常</li>
                                    <li>电缆接头：库存充足</li>
                                    <li>梯子：库存紧张</li> <!-- 第15项普通库存紧张 -->
                                    <li>安全帽：库存正常</li>
                                    <li>测电笔：库存充足</li>
                                    <li>警示锥：库存紧张</li> <!-- 第18项普通库存紧张 -->
                                    <li>防火泥：库存正常</li>
                                    <li>防水胶圈：库存充足</li>
                                    <li>电笔：库存紧张</li> <!-- 第21项红色警示 -->
                                    <li>玻璃胶：库存正常</li>
                                    <li>防滑垫：库存紧张</li> <!-- 第24项红色警示 -->
                                    <li>灭火器：库存充足</li>
                                    <li>安全绳：库存紧张</li> <!-- 第27项普通库存紧张 -->
                                    <li>清洁剂：库存正常</li>
                                    <li>工具箱：库存充足</li>
                                    <li>警示牌：库存紧张</li> <!-- 第30项普通库存紧张 -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>员工单量情况</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                李师傅 <span style="color: #97fe68;">986单</span>
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                张师傅 <span style="color: #97fe68;">785单</span>
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                王师傅 <span style="color: #97fe68;">643单</span>
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>时间分布 <i class="date">// 近5月 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>2月</span>
                                    <span>63 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>3月</span>
                                    <span>279 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>4月</span>
                                    <span>340 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>5月</span>
                                    <span>374 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>6月</span>
                                    <span>342 <s class="icon-down"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>

<script src="./js/china.js"></script>
<script src="./js/self.js"></script>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=2a91ee65d1ca138aaf787a11db035089"></script>

</html>

